<template>
  <div>
<van-nav-bar
    title="黑马头条-墨林"
    fixed
   />
   <div class="mian" >
 <van-form @submit="onSubmit">
  <van-field
    v-model="loginObj.mobile"
    required
    name="mobile"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请输入正确的手机号',pattern :/^1[3-9]\d{9}$/ }]"
  />
  <van-field
    v-model="loginObj.code"
    required
    type="number"
    name="code"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请输入6位的验证码' ,pattern :/^\d{6}$/}]"
  />
  <div style="margin: 16px;">
    <van-button round block :loading="isloading" type="info" native-type="submit" loading-text="登录中..." :disabled="isloading">登录</van-button>
  </div>
</van-form>
</div>
  </div>
</template>

<script>
import { loginApi } from '@/api'
import { Notify } from 'vant'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      loginObj: {
        mobile: '13888888888',
        code: '246810'
      },
      isloading: false
    }
  },
  methods: {
    ...mapMutations(['setrefreshToken', 'setToken']),
    async onSubmit (values) {
      this.isloading = true
      console.log('submit', values)
      const [err, res] = await loginApi(values)
      // console.log(res)
      if (err) {
        Notify({
          type: 'danger',
          message: '手机号活验证码错误'
        })
      } else {
        Notify({
          type: 'success',
          message: '登录成功'
        })
        this.setrefreshToken(res.data.data.refresh_token)
        this.setToken(res.data.data.token)
        setTimeout(() => {
          this.$router.push('/layout/home')
        }, 2000)
      }
      this.isloading = false
    }
  }
}
</script>

<style>
.mian {
    padding-top: 46px;
}
</style>
